<template>
  <div>
    <div>
      <van-nav-bar>
        <template #left>
          <h1 @click="$router.back()">
            <van-icon name="arrow-left" />
          </h1>
        </template>
        <template #title>
          <div class="qb">
            <p>充值</p>
          </div>
        </template>
        <template #right> </template>
      </van-nav-bar>
    </div>
    <div class="mian">
      <div class="mian_cont">
        <div class="cont">
          <span>充值金额</span>
          <input type="tex" placeholder="请输入充值金额" v-model="item" />
        </div>
      </div>
      <div class="content">
        <div class="cont_div">
          <p>选择充值方式</p>
          <div class="cont_div_1">
            <div class="cont_left">
              <img src="../../assets/wx.jpg" alt="" />
              <span>微信支付</span>
            </div>
            <div class="cont_right">
              <input type="checkbox" id="check-me" checked />
              <label for="check-me" class="label">
                <svg viewBox="-9 -9 43 35.191" width="43" height="35">
                  <path
                    id="check-icon"
                    d=" M 0 9 Q 8 17 8 17 Q 8 17 25 0"
                    fill="none"
                    stroke-width="6"
                    stroke="rgb(0,0,0)"
                    stroke-linecap="round"
                  />
                </svg>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="foot">
        <div class="btn" @click="btn">确认充值</div>
      </div>
    </div>
    <div>
      {{ this.$store.state.Arr }}
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      item: "",
      nowDate: {},
    };
  },
  methods: {
    btn() {
      let val = this.item;
      console.log(Number(this.item));
      //  Toast.success("充值成功");
      if (isNaN(Number(this.item))) {
        console.log(Number(this.item));
        Toast("请输入正确格式");
        this.item = null;
      } else {
        Toast.success("充值成功");
        this.item = null;
        this.$store.commit("setLogin", val);
        console.log(this.$store.state.Arr);
        this.Time();
        this.$store.commit("setNowDate", this.nowDate);
        console.log(this.$store.state.setTime);
      }
    },
    Time() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
      console.log(this.nowDate);
      return this.nowDate;
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.div_1 {
  color: orange;
  font-size: 14px;
}
.qb {
  letter-spacing: 2px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.mian {
  width: 100%;
  height: 91vh;
  background: #f5f5f5;
  padding-top: 20px;
}
.mian_cont {
  width: 90%;
  margin: 0 auto;
  padding-top: 20px;
  background: #ffffff;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
}
.cont {
  height: 100%;
  line-height: 100%;
  font-size: 20px;
}
.cont span {
  margin-left: 15px;
}
.cont input {
  height: 30px;
  margin-left: 15px;
  border: none;
  outline: none;
  color: darkorange;
}
.cont input::-webkit-input-placeholder {
  color: #dcdcdc;
  font-size: 18px;
}
.content {
  width: 90%;
  margin: 10px auto 0;
  background: #ffffff;
  height: 150px;
  border-radius: 10px;
}
.content .cont_div {
  height: 100%;
}
.content .cont_div p {
  height: 20px;
  padding: 15px;
  line-height: 15px;
  color: rgb(238, 232, 235 223);
}
.cont_div_1 {
  width: 95%;
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
}
.cont_left {
  float: left;
  width: 170px;
  height: 80px;
  line-height: 80px;
}
.cont_left img {
  width: 80px;
}
.cont_left span {
  float: right;
  display: inline-block;
  margin-right: 5px;
  font-size: 18px;
  height: 100%;
}
.cont_right {
  float: right;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + .label {
  position: relative;
  padding-left: 1.7em;
  color: blue;
  font-size: 3.125rem;
  cursor: pointer;
}
input[type="checkbox"] + .label::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 15px;
  width: 20px;
  height: 20px;
  border: 2px solid #aef1ac;
}
input[type="checkbox"] + .label svg {
  position: absolute;
  top: 0.2em;
  left: 0.12em;
  z-index: 1;
}
input[type="checkbox"] + .label #check-icon {
  stroke: #00acc1;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
}
input[type="checkbox"]:checked + .label::after {
  transform: scale(1);
  opacity: 1;
}
input[type="checkbox"]:checked + .label #check-icon {
  animation-name: check-animation;
  animation-duration: 0.1s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(1, 0.12, 0.96, 0.62);
}

@keyframes check-animation {
  0% {
    stroke-dashoffset: 36;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.foot {
  width: 90%;
  margin: 0 auto;
}
.foot .btn {
  border-radius: 5px;
  width: 95%;
  margin: 20px auto 0;
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  color: #ffffff;
  background: orangered;
}
</style>